<!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="声明display属性 设置父容器为行内元素或块元素我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素 控制几列 每列宽123456789grid-template-colums:第一列宽度 第二列宽度 ...有"><meta property="og:type" content="article"><meta property="og:title" content="grid布局"><meta property="og:url" content="https://buqingdege.gitee.io/xujianhu/css/grid%E5%B8%83%E5%B1%80/index.html"><meta property="og:site_name" content="Hexo"><meta property="og:description" content="声明display属性 设置父容器为行内元素或块元素我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素 控制几列 每列宽123456789grid-template-colums:第一列宽度 第二列宽度 ...有"><meta property="og:locale"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="article:published_time" content="2023-10-08T12:49:37.600Z"><meta property="article:modified_time" content="2023-10-08T12:48:56.154Z"><meta property="article:author" content="buqingdege"><meta property="article:tag" content="css"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><title>grid布局</title><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="16x16"><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="32x32"><link rel="stylesheet" href="/xujianhu/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css"><link rel="stylesheet" href="/xujianhu/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"buqingdege.gitee.io",author:"buqingdege",root:"/xujianhu/",typed_text:["buqingdege"],theme_version:"2.1.2",theme:{switch:!0,default:"style-light"},favicon:{logo:"/img/favicon.svg",icon16:"/img/favicon.svg",icon32:"/img/favicon.svg",appleTouchIcon:null,webmanifest:null,visibilitychange:!1,hidden:"/failure.ico",showText:"(/≧▽≦/)咦！又好了！",hideText:"(●—●)喔哟，崩溃啦！"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!1,plugin:{flickr_justified_gallery:"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",user_tag:"fas fa-user-alt",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!1,title:"mac",height_limit:200},toc:{post_title:!1}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2023-10-08 20:48:56"}</script><link data-swup-theme rel="stylesheet" href="/xujianhu/css/index.css?v=2.1.2" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/xujianhu/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/xujianhu/img/favicon.svg"><div class="trm-logo-text">不情<span>的歌</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="/xujianhu/" target="">主页</a></li><li class="menu-item-has-children"><a href="/xujianhu/categories/" target="">分类</a></li><li class="menu-item-has-children"><a href="/xujianhu/archives/" target="">归档</a></li><li class="menu-item-has-children"><a data-no-swup href="/xujianhu/tag/" target="">标签</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"> <label class="trm-swich" for="trm-swich"></label> <i class="iconfont far fa-moon"></i></div></div><form class="site-search-form"><input type="text" id="local-search-input" class="st-search-input" style="margin-bottom:0"></form><div id="local-search-result" class="local-search-result-cls"></div></div><div class="trm-menu-btn"><span></span></div></div></header><link rel="stylesheet" href="css/search.css"><script src="js/jquery.js"></script><script src="js/search.js"></script><script src="js/search_custom.js"></script><div class="trm-content-start"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="/xujianhu/img/banner.png"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font">grid布局</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/xujianhu/" class="trm-anima-link">Home</a></li><li><span>css</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar" src="/xujianhu/images/logo/avatar.jpg"></div><h5 class="trm-name trm-mb-15">不情的歌</h5><div class="trm-label">I`m <span class="trm-typed-text"></span></div></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="https://github.com" title="github" rel="nofollow" target="_blank"><i class="iconfont fab fa-github"></i> </a><a href="https://gitee.com" title="gitee" rel="nofollow" target="_blank"><i class="iconfont iconfont cg-gitee"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">地址:</div><div class="trm-label trm-label-light">火星</div></li><li><div class="trm-label">年龄:</div><div class="trm-label trm-label-light">25</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:951649211@qq.com" class="trm-btn">联系我 <i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>10/08</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>20:49</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br>buqingdege</div></div></div><div class="trm-card"><article id="article-container" class="trm-publication"><h2 id="声明display属性-设置父容器为行内元素或块元素"><a href="#声明display属性-设置父容器为行内元素或块元素" class="headerlink" title="声明display属性 设置父容器为行内元素或块元素"></a>声明display属性 设置父容器为行内元素或块元素</h2><p>我们通过在元素上声明 <code>display：grid</code> 或 <code>display：inline-grid</code> 来创建一个网格容器。声明 <code>display：grid</code> 则该容器是一个块级元素，设置成 <code>display: inline-grid</code> 则容器元素为行内元素</p><h2 id="控制几列-每列宽"><a href="#控制几列-每列宽" class="headerlink" title="控制几列 每列宽"></a>控制几列 每列宽</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">grid-template-colums:第一列宽度 第二列宽度 ...</span><br><span class="line"></span><br><span class="line">有几个宽度就是控制有几列  </span><br><span class="line"></span><br><span class="line">如果有重复的列宽 不想费劲写那就是</span><br><span class="line">grid-template-colums:repeat(几个重复次数，宽度)；</span><br><span class="line">比如一个布局容器里有6个元素 需要5列 前4列宽度50px 最后一列30px 可以这样写</span><br><span class="line">grid-template-colums:repeat(4,50px) 30px;</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="fr的新单位"><a href="#fr的新单位" class="headerlink" title="fr的新单位"></a>fr的新单位</h2><p>fr可以说是一个百分数 也就是父容器剩余部分 这个子元素所占得份数 类似flex:1;</p><p>比如两个元素平分父容器 可以是</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-colums:1fr 1fr;</span><br></pre></td></tr></table></figure><p>也可以混合px使用</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-columns: repeat(2,60px)  1fr; </span><br></pre></td></tr></table></figure><h2 id="控制行高"><a href="#控制行高" class="headerlink" title="控制行高"></a>控制行高</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">grid-template-rows:第一行高  第二行高 ...</span><br><span class="line"></span><br><span class="line">同样可以用 repeat fr 但fr前提是父容器有高度 也就是有剩余空间的概念</span><br><span class="line">grid-template-rows: repeat(2,100px);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>注意不要混淆控制有几行 多少列才能决定有几行 比如6个元素 控制3列 那么就是两行显示</p><h2 id="自动行高"><a href="#自动行高" class="headerlink" title="自动行高"></a>自动行高</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-auto-rows: 像素或者fr等;</span><br></pre></td></tr></table></figure><p>假如不想一行一行的写行高 那么可以指定没有写的行的行高都是自动以grid-auto-rows设定的值</p><p>比如我完全不想一行行写行高 并且所有行都一样高 那么可以设定</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-auto-rows:100px;</span><br></pre></td></tr></table></figure><p>又比如 某些行写了 某些行没写</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.container&#123;</span><br><span class="line"> grid-template-columns: repeat(2,60px); </span><br><span class="line"> height:300px</span><br><span class="line"> grid-auto-rows: 1fr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这表示前两行行高是60px 剩下行平分剩余空间</p><blockquote><p>注意 grid-template-columns的优先级高于 grid-auto-rows</p><p>grid-auto-rows 不能覆盖掉原来定义对应行的行高</p></blockquote><h2 id="自动设定有几列-可以实现响应式-auto-fill-minmax关键词"><a href="#自动设定有几列-可以实现响应式-auto-fill-minmax关键词" class="headerlink" title="自动设定有几列 可以实现响应式 auto-fill  minmax关键词"></a>自动设定有几列 可以实现响应式 auto-fill minmax关键词</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230513214821865.webp" alt="image-20230513214821865" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>比如说每个盒子设定尺寸是宽150px 高50px 如果想让5号6号盒子上去一行或者4号3号下来一行 让盒子自动根据父容器宽度来设定栅格布局有几列</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <span class="selector-class">.wrap</span>&#123;</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">                <span class="attribute">display</span>: grid;</span><br><span class="line">                </span><br><span class="line">                </span><br><span class="line">    <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(auto-fill,<span class="number">150px</span>) ;</span><br><span class="line">    <span class="attribute">grid-auto-rows</span>: <span class="number">50px</span>; </span><br><span class="line">              </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过关键词auto-fill 关键词可以实现自动填充 作用是让一行尽可能的容纳更多的单元格 每行的列的数量不固定</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389591c300e81a~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>配合最小最大关键词minmax 可以实现自动设定宽度 盒子的宽度会随父盒子宽度变化 最小是150px 最大是独占1份</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-columns: repeat(auto-fill,minmax(150px,1fr)) ;</span><br></pre></td></tr></table></figure><h2 id="控制行列缝隙"><a href="#控制行列缝隙" class="headerlink" title="控制行列缝隙"></a>控制行列缝隙</h2><p>column-gap:数值</p><p>row-gap:数值</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">column-gap:20px;</span><br><span class="line">row-gap：1em;</span><br></pre></td></tr></table></figure><p>两者简写</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">gap:行间隙 列间隙；</span><br><span class="line">行列间隙一样：</span><br><span class="line">gap:20px;</span><br></pre></td></tr></table></figure><h2 id="minmax函数作用"><a href="#minmax函数作用" class="headerlink" title="minmax函数作用"></a>minmax函数作用</h2><p><strong>minmax() 函数</strong>：我们有时候想给网格元素一个最小和最大的尺寸，<code>minmax()</code> 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。<code>grid-template-columns: 1fr 1fr minmax(300px, 2fr)</code> 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：</p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.<span class="keyword">wrapper</span><span class="number">-4</span> &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: <span class="number">1</span>fr <span class="number">1</span>fr minmax(<span class="number">300</span>px, <span class="number">2</span>fr);</span><br><span class="line">  grid-gap: <span class="number">5</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389591dc05edac~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="auto关键字"><a href="#auto关键字" class="headerlink" title="auto关键字"></a>auto关键字</h2><p><strong>auto 关键字</strong>：由浏览器决定长度。通过 <code>auto</code> 关键字，我们可以轻易实现三列或者两列布局。<code>grid-template-columns: 100px auto 100px</code> 表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.wrapper-5 &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: 100px auto 100px;</span><br><span class="line">  grid-gap: 5px;</span><br><span class="line">  grid-auto-rows: 50px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389591f2146e1d~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="grid-template-areas-属性"><a href="#grid-template-areas-属性" class="headerlink" title="grid-template-areas 属性"></a>grid-template-areas 属性</h2><p><code>grid-template-areas</code> 属性用于定义区域，一个区域由一个或者多个单元格组成</p><p>一般这个属性跟网格元素的 <code>grid-area</code> 一起使用，我们在这里一起介绍。 <code>grid-area</code> 属性指定项目放在哪一个区域</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">css复制代码<span class="selector-class">.wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-gap</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="number">120px</span>  <span class="number">120px</span>  <span class="number">120px</span>;</span><br><span class="line">  <span class="attribute">grid-template-areas</span>:</span><br><span class="line">    <span class="string">&quot;. header  header&quot;</span> //第一行</span><br><span class="line">    <span class="string">&quot;sidebar content content&quot;</span>; //第二行</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#444</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面代码表示划分出 6 个单元格，其中值得注意的是 <code>.</code> 符号代表空的单元格，也就是没有用到该单元格 也可以是xx等 占位</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">sidebar &#123;</span><br><span class="line">  <span class="attribute">grid-area</span>: sidebar; //给每一个<span class="attribute">grid</span>字容器区域起名</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.content</span> &#123;</span><br><span class="line">  <span class="attribute">grid-area</span>: content;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">  <span class="attribute">grid-area</span>: header;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>以上代码表示将类 <code>.sidebar</code> <code>.content</code> <code>.header</code>所在的元素放在上面 <code>grid-template-areas</code> 中定义的 <code>sidebar</code> <code>content</code> <code>header</code> 区域中</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/173895920bbe824a~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="img" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><blockquote><p>​	简单理解就是areas方式就是单元格</p></blockquote><h2 id="justify-items-属性、align-items-属性以及-place-items-属性"><a href="#justify-items-属性、align-items-属性以及-place-items-属性" class="headerlink" title="justify-items 属性、align-items 属性以及 place-items 属性"></a>justify-items 属性、align-items 属性以及 place-items 属性</h2><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/zYrXYrz?editors=1100">justify-items 属性、align-items 属性演示地址</a></p><p><code>justify-items</code> 属性设置单元格内容的水平位置（左中右），<code>align-items</code> 属性设置单元格的垂直位置（上中下）</p><p>下面以 justify-items 属性为例进行讲解，align-items 属性同理，只是方向为垂直方向。它们都有如下属性：</p><figure class="highlight coq"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">coq复制代码.container &#123;</span><br><span class="line">  justify-items: start | <span class="type">end</span> | <span class="type">center</span> | <span class="type">stretch</span>;</span><br><span class="line">  align-items: start | <span class="type">end</span> | <span class="type">center</span> | <span class="type">stretch</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>其代码实现以及效果如下：</p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span>, .<span class="keyword">wrapper</span><span class="number">-1</span>, .<span class="keyword">wrapper</span><span class="number">-2</span>, .<span class="keyword">wrapper</span><span class="number">-3</span> &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: <span class="number">100</span>px <span class="number">200</span>px <span class="number">100</span>px;</span><br><span class="line">  grid-gap: <span class="number">5</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">  justify-items: <span class="keyword">start</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-1</span> &#123;</span><br><span class="line">  justify-items: <span class="keyword">end</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-2</span> &#123;</span><br><span class="line">  justify-items: center;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-3</span> &#123;</span><br><span class="line">  justify-items: stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>start：对齐单元格的起始边缘</li></ul><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/1738959244947d96~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ul><li>end：对齐单元格的结束边缘</li></ul><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592560e3fc2~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ul><li>center：单元格内部居中</li></ul><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/173895925bd879fa~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ul><li>stretch：拉伸，占满单元格的整个宽度（默认值）</li></ul><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/1738959270057d0c~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="justify-content-属性、align-content-属性以及-place-content-属性"><a href="#justify-content-属性、align-content-属性以及-place-content-属性" class="headerlink" title="justify-content 属性、align-content 属性以及 place-content 属性"></a>justify-content 属性、align-content 属性以及 place-content 属性</h2><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/qBbwBZx?editors=1100">justify-content 属性、align-content 属性演示地址</a></p><p><code>justify-content</code> 属性是整个内容区域在容器里面的水平位置（左中右），<code>align-content</code> 属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。</p><figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">applescript复制代码.container &#123;</span><br><span class="line">  justify-content: start | <span class="keyword">end</span> | center | stretch | <span class="literal">space</span>-<span class="keyword">around</span> | <span class="literal">space</span>-<span class="keyword">between</span> | <span class="literal">space</span>-evenly;</span><br><span class="line">  align-content: start | <span class="keyword">end</span> | center | stretch | <span class="literal">space</span>-<span class="keyword">around</span> | <span class="literal">space</span>-<span class="keyword">between</span> | <span class="literal">space</span>-evenly;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>下面以 <code>justify-content</code> 属性为例进行讲解，<code>align-content</code> 属性同理，只是方向为垂直方向</p><ul><li>start - 对齐容器的起始边框</li><li>end - 对齐容器的结束边框</li><li>center - 容器内部居中</li></ul><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span>, .<span class="keyword">wrapper</span><span class="number">-1</span>, .<span class="keyword">wrapper</span><span class="number">-2</span>, .<span class="keyword">wrapper</span><span class="number">-3</span>, .<span class="keyword">wrapper</span><span class="number">-4</span>, .<span class="keyword">wrapper</span><span class="number">-5</span>, .<span class="keyword">wrapper</span><span class="number">-6</span> &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: <span class="number">100</span>px <span class="number">200</span>px <span class="number">100</span>px;</span><br><span class="line">  grid-gap: <span class="number">5</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">  justify-content: <span class="keyword">start</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-1</span> &#123;</span><br><span class="line">  justify-content: <span class="keyword">end</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-2</span> &#123;</span><br><span class="line">  justify-content: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/173895926d20f5d6~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ul><li>space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍</li><li>space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔</li><li>space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔</li><li>stretch - 项目大小没有指定时，拉伸占据整个网格容器</li></ul><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span><span class="number">-3</span> &#123;</span><br><span class="line">  justify-content: space-around;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-4</span> &#123;</span><br><span class="line">  justify-content: space-<span class="keyword">between</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-5</span> &#123;</span><br><span class="line">  justify-content: space-evenly;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-6</span> &#123;</span><br><span class="line">  justify-content: stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/173895927ba770c4~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="grid-auto-columns-属性和-grid-auto-rows-属性"><a href="#grid-auto-columns-属性和-grid-auto-rows-属性" class="headerlink" title="grid-auto-columns 属性和 grid-auto-rows 属性"></a>grid-auto-columns 属性和 grid-auto-rows 属性</h2><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/zYrXvYZ?editors=1100">grid-auto-columns 属性和 grid-auto-rows 属性演示地址</a></p><p>在讲 <code>grid-auto-columns</code> 属性和 <code>grid-auto-rows</code> 属性之前，先来看看隐式和显式网格的概念</p><p><strong>隐式和显式网格</strong>：显式网格包含了你在 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列</p><p>假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 <code>grid-auto-columns</code> 属性和 <code>grid-auto-rows</code> 属性设置。它们的写法和<code>grid-template-columns</code> 和 <code>grid-template-rows</code> 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高</p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span> &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: <span class="number">200</span>px <span class="number">100</span>px;</span><br><span class="line"><span class="comment">/*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */</span></span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">rows</span>: <span class="number">100</span>px <span class="number">100</span>px;</span><br><span class="line">  grid-gap: <span class="number">10</span>px <span class="number">20</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>grid-template-columns</code> 属性和 <code>grid-template-rows</code> 属性只是指定了两行两列，但实际有九个元素，就会产生隐式网格。通过 <code>grid-auto-rows</code> 可以指定隐式网格的行高为 50px</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/173895927d99af1c~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="img" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="通过网格线布局"><a href="#通过网格线布局" class="headerlink" title="通过网格线布局"></a>通过网格线布局</h2><h3 id="grid-column-start-属性、grid-column-end-属性、grid-row-start-属性以及grid-row-end-属性"><a href="#grid-column-start-属性、grid-column-end-属性、grid-row-start-属性以及grid-row-end-属性" class="headerlink" title="grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性"></a>grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性</h3><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/PoZgopr">演示地址</a></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230513231650223.webp" alt="image-20230513231650223" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置</p><ul><li>grid-column-start 属性：左边框所在的垂直网格线</li><li>grid-column-end 属性：右边框所在的垂直网格线</li><li>grid-row-start 属性：上边框所在的水平网格线</li><li>grid-row-end 属性：下边框所在的水平网格线</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">css复制代码<span class="selector-class">.wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">1</span>fr);</span><br><span class="line">  <span class="attribute">grid-gap</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">grid-auto-rows</span>: <span class="built_in">minmax</span>(<span class="number">100px</span>, auto);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.one</span> &#123;</span><br><span class="line">  <span class="attribute">grid-column-start</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">grid-column-end</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#19CAAD</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.two</span> &#123; </span><br><span class="line">  <span class="attribute">grid-column-start</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">grid-column-end</span>: <span class="number">4</span>;</span><br><span class="line">  <span class="attribute">grid-row-start</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">grid-row-end</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="comment">/*   如果有重叠，就使用 z-index */</span></span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#8CC7B5</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.three</span> &#123;</span><br><span class="line">  <span class="attribute">grid-column-start</span>: <span class="number">3</span>;</span><br><span class="line">  <span class="attribute">grid-column-end</span>: <span class="number">4</span>;</span><br><span class="line">  <span class="attribute">grid-row-start</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">grid-row-end</span>: <span class="number">4</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#D1BA74</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.four</span> &#123;</span><br><span class="line">  <span class="attribute">grid-column-start</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">grid-column-end</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">grid-row-start</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">grid-row-end</span>: <span class="number">5</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#BEE7E9</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.five</span> &#123;</span><br><span class="line">  <span class="attribute">grid-column-start</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">grid-column-end</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">grid-row-start</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">grid-row-end</span>: <span class="number">5</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#E6CEAC</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.six</span> &#123;</span><br><span class="line">  <span class="attribute">grid-column</span>: <span class="number">3</span>;</span><br><span class="line">  <span class="attribute">grid-row</span>: <span class="number">4</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ECAD9E</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>上面代码中，类 <code>.two</code> 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。其中它跟 <code>.three</code> （垂直网格线是从3 到 4，水平网格线是从 1 到 4） 是有冲突的。可以设置 <code>z-index</code> 去决定它们的层级关系</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/173895928bc7e88e~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="img" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>都可以简写</p><p>比如</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">gird-column-start:1 ;  gird-column-end:2;</span><br><span class="line">简写成</span><br><span class="line"></span><br><span class="line">grid-column:1/2;</span><br><span class="line">或者写成跨度</span><br><span class="line">gird-column:1</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="justify-self-属性、align-self-属性以及-place-self-属性-只作用域单个项目"><a href="#justify-self-属性、align-self-属性以及-place-self-属性-只作用域单个项目" class="headerlink" title="justify-self 属性、align-self 属性以及 place-self 属性 只作用域单个项目"></a>justify-self 属性、align-self 属性以及 place-self 属性 只作用域单个项目</h2><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/ZEQZEJK?editors=1100">justify-self 属性&#x2F; align-self 属性&#x2F; place-self 属性演示地址</a></p><p><code>justify-self</code> 属性设置单元格内容的水平位置（左中右），跟 <code>justify-items</code> 属性的用法完全一致，但只作用于单个项目</p><p><code>align-self</code> 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目</p><p>两者很相像，这里只拿 <code>justify-self</code> 属性演示，<code>align-self</code> 属性同理，只是作用于垂直方向。<code>place-self</code> 是设置 <code>align-self</code> 和 <code>justify-self</code> 的简写形式，这里也不重复介绍。</p><figure class="highlight coq"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">coq复制代码.item &#123;</span><br><span class="line">  justify-self: start | <span class="type">end</span> | <span class="type">center</span> | <span class="type">stretch</span>;</span><br><span class="line">  align-self: start | <span class="type">end</span> | <span class="type">center</span> | <span class="type">stretch</span>;</span><br><span class="line">&#125;</span><br><span class="line">applescript复制代码.item &#123;</span><br><span class="line">  justify-self: start;</span><br><span class="line">&#125;</span><br><span class="line">.item<span class="number">-1</span> &#123;</span><br><span class="line">  justify-self: <span class="keyword">end</span>;</span><br><span class="line">&#125;</span><br><span class="line">.item<span class="number">-2</span> &#123;</span><br><span class="line">  justify-self: center;</span><br><span class="line">&#125;</span><br><span class="line">.item<span class="number">-3</span> &#123;</span><br><span class="line">  justify-self: stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>start：对齐单元格的起始边缘</li></ul><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/1738959292160e78~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ul><li>end：对齐单元格的结束边缘</li></ul><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592a0d5a3c0~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ul><li><p>center：单元格内部居中</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592b1378c8d~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p></li><li><p>stretch：拉伸，占满单元格的整个宽度（默认值）</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592b895f0ed~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p></li></ul><h2 id="技巧"><a href="#技巧" class="headerlink" title="技巧"></a>技巧</h2><h3 id="fr-实现等分响应式"><a href="#fr-实现等分响应式" class="headerlink" title="fr 实现等分响应式"></a>fr 实现等分响应式</h3><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/wvMZKpB?editors=1100">fr 实现等分响应式</a></p><p><code>fr</code> 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。<code>grid-template-columns: 1fr 1fr 1fr</code> 表示容器分为三等分</p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span> &#123;</span><br><span class="line">  margin: <span class="number">50</span>px;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: <span class="number">1</span>fr <span class="number">1</span>fr <span class="number">1</span>fr;</span><br><span class="line">  grid-gap: <span class="number">10</span>px <span class="number">20</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592bf7e44dd~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="repeat-auto-fit——固定列宽，改变列数量"><a href="#repeat-auto-fit——固定列宽，改变列数量" class="headerlink" title="repeat + auto-fit——固定列宽，改变列数量"></a>repeat + auto-fit——固定列宽，改变列数量</h3><p>等分布局并不只有 <code>Grid</code> 布局才有，像 <code>flex</code> 布局也能轻松实现，接下来看看更高级的响应式</p><p>上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。这个时候，我们可以用到上面提到 <code>repeat()</code> 函数以及 <code>auto-fit</code> 关键字。<code>grid-template-columns: repeat(auto-fit, 200px)</code> 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：</p><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/eYJopVE?editors=1100">演示地址</a></p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span> &#123;</span><br><span class="line">  margin: <span class="number">50</span>px;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: repeat(auto-fit, <span class="number">200</span>px);</span><br><span class="line">  grid-gap: <span class="number">10</span>px <span class="number">20</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592c297495a~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="repeat-auto-fit-minmax-去掉右侧空白"><a href="#repeat-auto-fit-minmax-去掉右侧空白" class="headerlink" title="repeat+auto-fit+minmax 去掉右侧空白"></a>repeat+auto-fit+minmax 去掉右侧空白</h3><p>上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。<code>minmax()</code> 函数就帮助我们做到了这点。将 <code>grid-template-columns: repeat(auto-fit, 200px)</code> 改成 <code>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</code> 表示列宽至少 200px，如果还有空余则一起等分。代码以及效果如下所示：</p><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/dyGLYdQ">演示地址</a></p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span> &#123;</span><br><span class="line">  margin: <span class="number">50</span>px;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: repeat(auto-fit, minmax(<span class="number">200</span>px, <span class="number">1</span>fr));</span><br><span class="line">  grid-gap: <span class="number">10</span>px <span class="number">20</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592cc3c2bf9~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="auto-auto-minmax.gif" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="repeat-auto-fit-minmax-span-dense-解决空缺问题"><a href="#repeat-auto-fit-minmax-span-dense-解决空缺问题" class="headerlink" title="repeat+auto-fit+minmax-span-dense 解决空缺问题"></a>repeat+auto-fit+minmax-span-dense 解决空缺问题</h3><p>似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，这也简单，通过 <code>span</code> 关键字进行设置网格项目的跨度，<code>grid-column-start: span 3</code>，表示这个网格项目跨度为 3。具体的代码与效果如下所示：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">css复制代码<span class="selector-class">.item-3</span> &#123;</span><br><span class="line">  <span class="attribute">grid-column-start</span>: span <span class="number">3</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><a href="https://link.juejin.cn/?target=https://codepen.io/gpingfeng/pen/BajEoxy?editors=1100">演示地址</a></p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592f9da3763~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>不对，怎么右侧又有空白了？原来是有一些长度太长了，放不下，这个时候就到我们的 <code>dense</code> 关键字出场了。<code>grid-auto-flow: row dense</code> 表示尽可能填充，而不留空白，代码以及效果如下所示：</p><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">pgsql复制代码.<span class="keyword">wrapper</span>, .<span class="keyword">wrapper</span><span class="number">-1</span> &#123;</span><br><span class="line">  margin: <span class="number">50</span>px;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-<span class="keyword">template</span>-<span class="keyword">columns</span>: repeat(auto-fit, minmax(<span class="number">200</span>px, <span class="number">1</span>fr));</span><br><span class="line">  grid-gap: <span class="number">10</span>px <span class="number">20</span>px;</span><br><span class="line">  grid-auto-<span class="keyword">rows</span>: <span class="number">50</span>px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.<span class="keyword">wrapper</span><span class="number">-1</span> &#123;</span><br><span class="line">  grid-auto-flow: <span class="keyword">row</span> dense;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389593009f7fe7~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="Grid-布局兼容性"><a href="#Grid-布局兼容性" class="headerlink" title="Grid 布局兼容性"></a>Grid 布局兼容性</h2><p>最后，聊聊 <code>Grid</code> 布局兼容性问题，在 <a href="https://link.juejin.cn/?target=https://caniuse.com/%23search=grid">caniuse</a> 中，我们可以看到的结果如下，总体兼容性还不错，但在 IE 10 以下不支持。个人建议在公司的内部系统运用起来是没有问题的，但 TOC 的话，可能目前还是不太合适</p><p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/26/17389592fa541366~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp" alt="image" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章 <span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/javascript/Reflect/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/javascript/">javascript</a></div><h5><a href="/xujianhu/javascript/Reflect/" class="trm-anima-link">Reflect</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/10/08</li><li>23:33</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/git/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BD%BF%E7%94%A8geatea/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/git/">git</a></div><h5><a href="/xujianhu/git/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BD%BF%E7%94%A8geatea/" class="trm-anima-link">服务器使用geatea</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/10/08</li><li>20:46</li></ul></div></div></div></div><div class="trm-divider footer-divider"></div><footer class="trm-scroll-animation"><div class="trm-footer-item"><span>© 2023- 2023</span> <span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">不情的歌</span></div><div class="trm-footer-item">博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天</div><div class="trm-footer-item">当你累的时候你是在走上坡路</div></footer><script>function show_date_time(){var e=new Date("10/07/2023 15:00:00"),t=(new Date).getTime()-e.getTime(),i=Math.floor(t/864e5);since.innerHTML=i}show_date_time()</script></div></div></div></div></div><div id="post-toc" class="trm-post-toc"><div class="trm-post-toc-header">目录导航</div><div class="trm-post-toc-content"><ol class="trm-toc"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#声明display属性-设置父容器为行内元素或块元素"><span class="trm-toc-number">1.</span> <span class="trm-toc-text">声明display属性 设置父容器为行内元素或块元素</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#控制几列-每列宽"><span class="trm-toc-number">2.</span> <span class="trm-toc-text">控制几列 每列宽</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#fr的新单位"><span class="trm-toc-number">3.</span> <span class="trm-toc-text">fr的新单位</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#控制行高"><span class="trm-toc-number">4.</span> <span class="trm-toc-text">控制行高</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#自动行高"><span class="trm-toc-number">5.</span> <span class="trm-toc-text">自动行高</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#自动设定有几列-可以实现响应式-auto-fill-minmax关键词"><span class="trm-toc-number">6.</span> <span class="trm-toc-text">自动设定有几列 可以实现响应式 auto-fill minmax关键词</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#控制行列缝隙"><span class="trm-toc-number">7.</span> <span class="trm-toc-text">控制行列缝隙</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#minmax函数作用"><span class="trm-toc-number">8.</span> <span class="trm-toc-text">minmax函数作用</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#auto关键字"><span class="trm-toc-number">9.</span> <span class="trm-toc-text">auto关键字</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#grid-template-areas-属性"><span class="trm-toc-number">10.</span> <span class="trm-toc-text">grid-template-areas 属性</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#justify-items-属性、align-items-属性以及-place-items-属性"><span class="trm-toc-number">11.</span> <span class="trm-toc-text">justify-items 属性、align-items 属性以及 place-items 属性</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#justify-content-属性、align-content-属性以及-place-content-属性"><span class="trm-toc-number">12.</span> <span class="trm-toc-text">justify-content 属性、align-content 属性以及 place-content 属性</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#grid-auto-columns-属性和-grid-auto-rows-属性"><span class="trm-toc-number">13.</span> <span class="trm-toc-text">grid-auto-columns 属性和 grid-auto-rows 属性</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#通过网格线布局"><span class="trm-toc-number">14.</span> <span class="trm-toc-text">通过网格线布局</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#grid-column-start-属性、grid-column-end-属性、grid-row-start-属性以及grid-row-end-属性"><span class="trm-toc-number">14.1.</span> <span class="trm-toc-text">grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#justify-self-属性、align-self-属性以及-place-self-属性-只作用域单个项目"><span class="trm-toc-number">15.</span> <span class="trm-toc-text">justify-self 属性、align-self 属性以及 place-self 属性 只作用域单个项目</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#技巧"><span class="trm-toc-number">16.</span> <span class="trm-toc-text">技巧</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#fr-实现等分响应式"><span class="trm-toc-number">16.1.</span> <span class="trm-toc-text">fr 实现等分响应式</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#repeat-auto-fit——固定列宽，改变列数量"><span class="trm-toc-number">16.2.</span> <span class="trm-toc-text">repeat + auto-fit——固定列宽，改变列数量</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#repeat-auto-fit-minmax-去掉右侧空白"><span class="trm-toc-number">16.3.</span> <span class="trm-toc-text">repeat+auto-fit+minmax 去掉右侧空白</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#repeat-auto-fit-minmax-span-dense-解决空缺问题"><span class="trm-toc-number">16.4.</span> <span class="trm-toc-text">repeat+auto-fit+minmax-span-dense 解决空缺问题</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#Grid-布局兼容性"><span class="trm-toc-number">17.</span> <span class="trm-toc-text">Grid 布局兼容性</span></a></li></ol></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn post-toc-btn" data-title="目录"><i class="iconfont fas fa-th-list"></i></div><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div class="trm-fixed-btn hidden-md" data-title="单栏和双栏切换" onclick="asyncFun.switchSingleColumn()"><i class="iconfont fas fa-arrows-alt-h"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="/xujianhu/js/plugins/typing.js?v=2.1.2"></script><script id="async-script" src="/xujianhu/js/main.js?v=2.1.2"></script><script src="/xujianhu/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>